Tailwind CSSのPluginを作る

code:tailwind.config.js

const plugin = require('tailwindcss/plugin')

module.exports = {

plugins: [

plugin(function({ addUtilities, addComponents, e, config }) {

// Add your custom styles here

}),

]

}

自分で定義する時のフローチャートしては

自分で書くか、公開されているものを使うか決める

書く場合、それは以下のどれに分類されるかを判断する

base, utilities, components, variants

どれなのかによって使用する関数が変わる

それは、動的に生成したいか、静的に決まるものなのかを判断する

どっちなのかによって使用する関数が変わる

引数

実装箇所が自明でないのにこの方法で拡張とかできるもんなのか？

theme()、ユーザーのテーマ構成の値を検索するため

config()、ユーザーの Tailwind 構成の値を検索するため

corePlugins()、コアプラグインが有効になっているかどうかを確認するため

e()、クラス名で使用されることを意図した文字列を手動でエスケープするため

utilities系